<template>
    <el-row>
        <el-col class="btn">
            <el-dialog :visible.sync="dialogVisible" width="680px" :before-close="handleClose" @close="handleClose()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{title}}</span>
                </div>

                <div class="user-list radio">
                    <el-col class="box box-pack-center">
                        <div class="list box box-align-center">
                            <span class="item">姓名</span>
                            <span class="item">是否完成</span>
                            <span class="item">得分</span>
                        </div>
                    </el-col>

                    <el-col class="box box-pack-center" v-for="(item,index) in stuList" :key="index">
                        <div class="list box box-align-center">
                            <div class=" box box-align-center items">
                                <el-avatar size="large" :src="item.icon"></el-avatar>
                                <span class="name ml10">{{item.name}}</span>
                            </div>
                            <div class="items">
                                <i class="el-icon-check" v-if="item.wc == `1`"></i>
                                <span v-else>未完成</span>
                            </div>
                            <!-- <div class="items">
                                --
                            </div> -->
                            <div class="items">
                                {{item.score}}
                            </div>
                            <!-- <div class="items">
                                --
                            </div> -->
                        </div>
                    </el-col>
                </div>
                <!-- <el-button class="reset-comfirm-btn" @click="export2Excel">导出</el-button> -->
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            dialogVisible: {
                default: false
            },
            title: {
                default: '学生详情'
            },
            planid: {
                type: Number
            },
            classid: {
                type: Number
            },
            cousid: {
                type: Number
            },
            sectionid: {
                type: Number
            },
            ldsjid: {
                type: Number
            }
        },
        data() {
            return {
                loginInfo: this.$store.state.loginInfo,
				schoolid: this.$store.state.schoolId,
                stuList: [],
                courseInfo: {
                    chapterName: '',
                    sectionName: '',
                    num: 0,
                    exportTdata:[]
                }
            };
        },
        methods: {
            getKcrwStuInfo(item, couslistid, data) {
                var params = {
                    'couslistid': couslistid,
                    'classid': this.classid,
                    'cousid': this.cousid,
                    'sectionid': item.id
                };
                this.courseInfo.chapterName = data.title
                this.courseInfo.sectionName = item.title
                this.courseInfo.chapterNum = data.num
                this.courseInfo.sectionNum = item.num
                console.log(this.courseInfo.chapterName, this.courseInfo.sectionName, this.courseInfo.chapterNum, this
                    .courseInfo.sectionNum);
                this.$api.tr.getKcrwStuInfo(params).then(res => {
                    // console.log(res);
                    //导出数据
                    this.exportTdata = res.list.map(r=>{
                        return {
                            chapterNum: `第${data.num}章`,
                            chapterName: data.title,
                            sectionNum:`第${item.num}节`,
                            sectionName:item.title,
                            name:r.name,
                            score:r.score,
                            wc:r.wc == 0?`未完成`:`已完成`
                        }
                    })

                    console.log(this.exportTdata);

                    if (res.code == '0') {
                        this.stuList = res.list;

                    } else {
                        this.$message.error('操作失败！');
                    }
                })
            },
            ldsjStuWcInfo(ldsjid) {
                var params = {
                    'ldsjid': ldsjid,
                    'classid': this.classid,
                    'schoolid': this.schoolid
                };
                this.$api.tr.ldsjStuWcInfo(params).then(res => {
                    if (res.code == '0') {
                        this.stuList = res.list;
                    } else {
                        this.$message.error('操作失败！');
                    }
                })
            },
            handleClose() {
                this.$emit('clickClose')
            },
            export2Excel() {
                if (this.exportTdata.length == 0) {
                    this.$message.warning("暂无数据可以导出")
                } else {
                    require.ensure([], () => {
                        const {
                            export_json_to_excel
                        } = require('@/vendor/Export2Excel');
                        const tHeader = ['章', ' ', '节', ' ', '学生姓名', '是否完成',
                            '得分'
                        ];
                        const filterVal = ['chapterNum', 'chapterName', 'sectionNum', 'sectionName',
                            'name', 'wc', 'score'
                        ];
                        const list = this.exportTdata;
                        const data = this.formatJson(filterVal, list);
                        export_json_to_excel(tHeader, data, `第${this.courseInfo.chapterNum}章第${this.courseInfo.sectionNum}节学生课程进度`);
                    })
                }
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            }
        }
    };
</script>

<style scoped lang="scss">
    .upload-icon {
        width: 110px;
        height: 110px;
        background-color: #F0F1F8;
        line-height: 110px;
        color: #626BF1;
        font-size: 30px;
        border-radius: 10px;
    }

    .avatar {
        width: 110px;
        height: 110px;
    }

    .w100 {
        width: 100%;
    }

    .reset-form {
        padding: 0 20px;
    }


    .user-list {
        height: 400px;
        overflow-y: auto;
        box-sizing: border-box;

        .checkbox__label {
            width: 80%;
        }

        .list {
            padding: 10px 0;
        }

        .item {
            display: block;
            width: 120px;
            margin-right: 30px;
        }

        .items {
            margin-right: 30px;
            width: 120px;

            .name {
                display: block;
                height: 100%;
            }
        }
    }

    .user-list>>>.el-checkbox {
        padding: 0 20px;
        width: 585px;
        margin-right: 0;
        display: flex;
        justify-content: center;
    }

    .user-list>>>.el-checkbox__label {
        .list {
            display: flex;
            color: #000000;
        }
    }

    .user-list>>>.el-checkbox__input {
        display: flex;
        align-items: center;
    }

    .user-list>>>.el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #626BF1;
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox__inner:hover {
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox__input.is-focus,
        {
        border-color: #626BF1;

        .el-checkbox__inner {
            border-color: #626BF1;
        }
    }
</style>
